page-profile-two {
  @import url(http://weloveiconfonts.com/api/?family=zocial);
  /* zocial */
  [class*="zocial-"]:before {
    font-family: 'zocial', sans-serif;
  }
  .container {
    height: 100%;
    width: 100%;
    margin: 10% auto 0;
    background: #f0f0f0;
    border-radius: 3px;
    &:hover {
      .social li {
        margin: 0;
      }
    }
  }
  .header {
    text-align: center;
    padding: 40px 30px 0 30px;
    h1,
    h2 {
      font-weight: 300;
    }
    h1 {
      margin: 0;
    }
    h2 {
      margin: 0 0 15px 0;
      color: #505064;
    }
  }
  .profile {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    margin: 20px 0 -70px 0;
    border: 3px solid #f37346;
    transition: all 1.5s ease;
    &:hover {
      border: 3px solid red;
    }
  }
  .content {
    background: #f37346;
    color: #f0f0f0;
    padding: 75px 0 0 0;
    text-align: center;
    height: auto;
    p {
      padding: 20px 40px;
      font-weight: 300;
    }
  }
  .social {
    padding: 40px 0 0 0;
    ul {
      list-style-type: none;
      width: 100%;
      height: 50px;
      overflow: hidden;
      li {
        margin: 50px 0 0 0;
        float: left;
        width: 33.3333%;
        height: 100%;
        line-height: 50px;
        @for $i from 1 through 3 {
          &:nth-child(#{$i}) {
            transition: ($i * .3s);
          }
        }
      }
      a {
        color: #fff;
        text-decoration: none;
      }
    }
  }
  .zocial-facebook {
    background: #3B5998;
    display: block;
  }
  .zocial-twitter {
    background: #55ACEE;
    display: block;
  }
  .zocial-instagram {
    background: #3F729B;
    display: block;
  }
}

